<template>
  <div id="data-view">
    <div class="content">
      <!--<TopViews/>-->
      <OdHome v-if="state === 'home'" @changestate="changeState"/>
      <OdBus v-if="state === 'bus'" @changestate="changeState"/>
      <OdOd v-if="state === 'od'" @changestate="changeState"/>
    </div>
  </div>
</template>

<script>
  import TopViews from './homeViews/titleView.vue';
  import OdHome from './odAnalysis/odHome.vue';
  import OdOd from './odAnalysis/Odod.vue';
  import OdBus from './odAnalysis/OdBus.vue';
  export default {
    name: 'DataAnalysis',

    data () {
      return {
        state: 'home'
      }
    },

    methods: {
      changeState: function (newState) {
        if (this.state !== newState) this.state = newState;
      }
    },

    mounted(){

    },

    components: {
      TopViews,
      OdHome,
      OdOd,
      OdBus
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../static/common/common.scss";

  #data-view {
    width: 100%;
    height: $min-height;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    padding: 20px 15px;
    box-sizing: border-box;
    overflow-x: hidden;
    pointer-events: none;
    text-align: left;
    .content{
      position: relative;
      width: 100%;
      height: 100%;
    }
  }
</style>
